<template>
  <div id="app" class="df fd ac">
    <!-- 头部 -->
    <div class="header">
      <h1>
        <img @click="back" class="left-arrows" src="../../../assets/img/home-img/left-arrows.png" alt="">
        附近门店
      </h1>
    </div>
    <div class="search">
      <input type="text" placeholder="输入需要搜索的内容">
      <img src="../../../assets/img/maintain/search.png" alt="">
      <div class="cfff">
        <span class="f30" style="display:inline-block;font-weight: 450;margin-bottom:25rem;">历史记录：</span>
        <span>swd</span>
        <span>swd</span>
        <span>swd</span>
        <span>sasdawd</span>
        <span>sasdawd</span>
        <span>swd</span>
        <span>sasdawd</span>
        <span>sasdawd</span>
        <span>sasdawd</span>
      </div>
    </div>
    <!-- 门店 -->
    <div class="box" v-for="(el, index) in shop" :key="el.id" @click="particulars(el)">
      <div class="df j-b ac mb10 mt10">
        <p class="f30">{{el.name}}</p>
        <span class="f20" style="color: #0071FD;">{{ el.distance }}m</span>
      </div>
      <div class="f20 mb30 mt10">
        <van-icon name="star" color="#FFC100" size="20" v-for="(el, index) in el.star" style="margin-right: 5rem;"
          :key="index" />
        {{ el.star }}分 销量：{{ el.quantity }}
      </div>
      <div class="df">
        <img class="mr30 head" :src="el.gatePicture" alt="">
        <div class="f20">
          <p class="mt15 mb25">营业时间：{{ el.week }}</p>
          <p class="mb25">{{ el.time }}</p>
          <p>{{ el.address }}</p>
        </div>
      </div>
    </div>
    <p class="footer"><span>—</span>暂无更多<span>—</span></p>
  </div>
</template>

<script>
import { shopAll } from '@/api/maintain'
export default {
  mounted() {
    // 接收数据
    shopAll({})
      .then(r => {
        console.log(r.data);
        this.shop = r.data
      })
  },
  methods: {
    particulars(el) {
      this.$router.push({
        path: '/upWash',
        query: {
          user: el
        }
      })
    },
    back() {
      this.$router.push({
        path: '/keepIndex'
      })
    },
  },
  data() {
    return {
      control: false,
      shop: [
        {
          name: '车百事汽车生活馆', // 名字
          week: '周一至周五',// 星期
          time: '早上8：00-晚上22：00', // 当天营业时间
          address: '山阳区人民路与解放路交叉口', // 地址
          distance: 915, // 距离
          star: 3, // 分数
          gatePicture: require('../../../assets/img/home-img/mine.png'),// 头像
          quantity: 555,// 销量
        },
      ]
    }
  }
}
</script>

<style scoped>
.search img {
  position: absolute;
  width: 27rem;
  top: 31rem;
  right: 42rem;
}

.search span:nth-child(1) {
  padding: 0;
}

.search span {
  font-size: 20rem;
  padding-right: 35rem;
}

.search input:focus {
  outline: none;
}

.search input {
  padding: 30rem;
  font-size: 22rem;
  border-radius: 50rem;
  margin-bottom: 30rem;
  width: 100%;
  border: none;
  box-sizing: border-box;
}

.search {
  border-radius: 15rem;
  width: 86%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.footer span {
  padding: 0 12rem;
  color: #d3d2d2;
}

.footer {
  color: #727272;
  font-size: 22rem;
  margin-top: 50rem;
}

.head {
  height: 140rem;
  width: 206rem;
  border-radius: 15rem;
}

.df {
  display: flex !important;
}

.fd {
  flex-direction: column !important;
}

.jc {
  justify-content: center !important;
}

.ac {
  align-items: center !important;
}

.j-a {
  justify-content: space-around !important;
}

.j-b {
  justify-content: space-between !important;
}

.left-arrows {
  height: 40rem;
  position: absolute;
  left: 24rem;
}

.header {
  position: absolute;
  width: 100%;
  height: 436rem;
  z-index: 0;
  background-image: url('../../../assets/img/home-img/bg.png');
  background-size: 100%;
  top: 0rem;
}

.header h1 {
  text-align: center;
  font-size: 36rem;
  color: white;
  margin: 70rem 0 48rem;
}

.box {
  background-color: white;
  border-radius: 15rem;
  padding: 32rem;
  width: 92%;
  box-sizing: border-box;
  margin-top: 18rem;
  z-index: 1;
}

#app {
  background-color: #F7F7F7;
  padding: 148rem 0 170rem;
}
</style>